-<!--
 * @Author: your name
 * @Date: 2022-03-01 16:46:40
 * @LastEditTime: 2022-04-12 09:38:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \nien-vue3-admin\src\components\buttonTools\index.vue
-->
<template>
  <!-- 显示搜索隐藏 -->
  <el-row :gutter="10" class="mb8 button-row">
    <slot></slot>
    <el-col class="top-right-btn">
      <el-tooltip class="item" content="刷新" placement="top">
        <el-button
          size="small"
          circle
          :icon="Refresh"
          @click="$emit('refresh')"
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" :content="showSearch_ ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button
          size="small"
          circle
          :icon="Search"
          @click="handleClick"
        ></el-button>
      </el-tooltip>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { onMounted, ref, toRefs } from 'vue'
// import useSetting from '@/store/modules/setting';
import useSetting from '../../store/modules/setting'

const setting = useSetting()
let showSearch_ = ref(true),
  queryH = 0
const props = withDefaults(defineProps<{ showSearch: boolean }>(), {
  showSearch: true,
})
const emit = defineEmits(['update:showSearch', 'refresh'])
showSearch_.value = props.showSearch
onMounted(() => {
  const form: HTMLElement = document.querySelector('.el-form')
  queryH = form.offsetHeight
})
const handleClick = () => {
  emit('update:showSearch', (showSearch_.value = !showSearch_.value))
  getHeight()
}
const getHeight = () => {
  const table: HTMLElement = document.querySelector('.el-table')
  const button: HTMLElement = document.querySelector('.el-row')
  const pagination: HTMLElement = document.querySelector('.pagination-container')
  if (!table) return
  const tableH = table?.offsetHeight
  const buttonH = button?.offsetHeight
  const paginationH = pagination?.offsetHeight

  if (tableH) {
    let H = 0
    // console.log(tableH, buttonH, paginationH);
    if (showSearch_.value) {
      H = tableH - queryH
    } else {
      H = tableH + queryH
    }
    // 设置缓存
    setting.setTableH(H.toString())
  }
}
</script>
<style lang="less" scoped>
:deep(.button-row .el-button) {
  margin: 5px;
}
.button-row {
  margin: 0 !important;
  overflow: hidden;
  :deep(.el-col) {
    padding: 0 !important;
  }
}
.top-right-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>